<template>
  <div class="content">
    <vue-particles
      class="login-bg"
      color="#f4f4f4"
      :particleOpacity="0.5"
      :particlesNumber="120"
      shapeType="circle"
      :particleSize="4"
      linesColor="#f4f4f4"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    />
    <div class="content-box">
      <div class="content-login">
        <div class="content-login-info">
          <div class="sign-box">
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="86px"
            >
              <h3 class="title">毕业论文管理系统</h3>
              <el-form-item label="账号:" prop="account">
                <el-input
                  v-model="form.account"
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-user-solid"
                  autofocus="true"
                  class="custom-input"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  :show-password="tag"
                ></el-input>
              </el-form-item>
              <VerifyCode @input-sent="handleInput"></VerifyCode>
              <el-form-item label="">
                <el-button
                  type="primary"
                  class="w100p"
                  @click="doLogin"
                  style="font-size: larger"
                  >登陆</el-button
                >
                <div class="txt-r">
                  <router-link
                    to="/register"
                    style="position: absolute; right: 0"
                    >没有账号，去注册</router-link
                  >
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Message } from "element-ui";
import { login } from "@/api/api/loginApi.js";
import { computed, reactive, ref, nextTick } from "vue";
import router from "@/router";
import VerifyCode from "@/components/VerifyCode.vue";

const formRef = ref();

const form = reactive({
  account: "",
  password: "",
});
const tag = ref(true);
const rules = computed(() => {
  return {
    account: [
      {
        required: true,
        message: "请输入用户名",
        trigger: ["change", "blur"],
      },
      {
        pattern: /^[a-zA-Z][a-zA-Z0-9 _]{4,31}$/,
        message: "由英文字母开头的长度5-32位字母和_组成",
        trigger: ["change", "blur"],
      },
    ],
    password: {
      required: true,
      min: 6,
      message: "请输入至少6个字符的密码",
      trigger: ["change", "blur"],
    },
  };
});
var tag1 = false;
// 这个loading应该是提示的
function handleInput(value) {
  tag1 = value;
}

function doLogin() {
  formRef.value.validate((valid) => {
    if (!valid) {
      Message.error("请输入正确的用户名密码！");
      return;
    }
    if (!tag1) {
      Message.error("请输入正确的验证码！");
      return;
    }
    // 登录的地方
    login(form)
      .then((res) => {
        localStorage.setItem("userName", res.account);
        Message({
          message: "登录成功，正在跳转",
          type: "success",
          showClose: true,
          duration: 1500,
        });
        setTimeout(() => {
          router.push("/index/main_home");
        }, 1000);
      })
      .catch((err) => {
        return;
      });
  });
}
</script>

<style lang="less" scoped>
.content {
  height: 100vh;
  width: 100vw;
  background-image: url("../../assets/img/BackImg.jpg");
  background-size: cover;
  overflow: hidden;
}
.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sign-box {
  width: 400px;
  background: #fff;
  padding: 30px 50px 20px 30px;
  border-radius: 4px;
  box-shadow: 0 0 10px #022c44;
  .title {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #000;
    margin-left: 45px;
  }
  .w100p {
    width: 100%;
    margin-top: 22px;
  }
  .txt-r {
    font-size: 15px;
    width: 317px;
    position: relative;
  }
}

#canvas {
  float: right;
  margin-right: 1%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 80px;
}

.input-val {
  width: 50%;
  background: #ffffff;
  height: 2.8rem;
  border-radius: 5px;
  border: none;
  padding: 0 0 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/deep/.el-input__inner {
  &::placeholder {
    color: grey;
    font-size: 14px;
  }
}
</style>
@/api/api/loginApi.js